<template>
  <div class="opapi-key">
    <div class="bodybox">
      <el-form ref="form" :model="formdata" label-width="80px" label-position="left">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="企业名称">
                  <el-input v-model="formdata.companyName" placeholder="请输入企业名称" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="状态">
                   <el-radio-group v-model="formdata.ifEnable">
                      <el-radio :label="''">全部</el-radio>
                      <el-radio :label="1">启用</el-radio>
                      <el-radio :label="0">停用</el-radio>
                    </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="13" style="text-align: right;">
                <el-form-item label="">
                  <el-button  @click="chongzhi" size="small">重置</el-button>
                  <el-button @click="gettablelist"  type="primary" size="small">查询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
      <div class="table">
          <TableColumn
            :issize="'medium'"
            ref="tabledata"
            :tableData="tableData"
            :tableConfig="tableConfig"
          >
            <el-table-column label="操作">
              <template #default="{ row }">
                <div>
                  <el-link
                    type="primary"
                    class="primary"
                    :underline="false"
                    @click="tolook(row)"
                    >浏览</el-link
                  >
                  <el-link v-if="row.enabled" type="warning" :underline="false" 
                  @click="disab(row)"
                    >停用</el-link
                  >
                </div>
              </template>
            </el-table-column>
          </TableColumn>
        </div>
        <div class="fenye">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="pageNo"
            @current-change="gettablelist"
            :total="total"
          >
          </el-pagination>
        </div>
        <el-dialog title="" :visible.sync="dialogVisible" width="40%" >
            <div>
              <el-form ref="form" :model="formdia" label-width="100px" label-position="left" disabled>
                  <el-col :span="24">
                    <el-form-item label="企业名称">
                      <el-input v-model="formdia.companyName" placeholder="" size="small"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="账号">
                      <el-input v-model="formdia.userNo" placeholder="" size="small"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="AccessSecret">
                      <el-input v-model="formdia.accessSecret" placeholder="" size="small"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="AccessKey">
                      <el-input v-model="formdia.accessKey" placeholder="" size="small"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="创建时间">
                      <el-input v-model="formdia.createTime" placeholder="" size="small"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="当前状态">
                      <el-radio-group v-model="formdia.enabled">
                        <el-radio :label="true">启用</el-radio>
                        <el-radio :label="false">停用</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
              </el-form>
            </div>
            <div slot="footer">
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
            </div>
        </el-dialog>
    </div>
  </div>
</template>
<script>
import {getServiceListapi,postDisableapi,getOpenapiapi} from '@/api/system/opapi'
import TableColumn from '@/components/Table'
export default {
  name: 'CallPoliceIndex',
  components: {
    TableColumn
  },
  data() {
    return {
      total:0,
      pageNo:0,
      pageSize:15,
      formdia:{},
      formdata:{ifEnable:''},
      tableData:[],
      tableConfig:[
        { label: '序号', type: 'index', width: '100', center: 'center' },
        { label: '企业名称', prop: 'companyName' },
        { label: '账号', prop: 'userNo' },
        { label: 'AccessSecret', prop: 'accessSecret' },
        { label: 'AccessKey', prop: 'accessKey' },
        { label: '创建时间', prop: 'createTime' },
        { label: '当前状态', prop: 'enabled',
          formatter: (row, column, cellValue, index) => {
            return cellValue?'启用':'停用'
          } },
      ],
      dialogVisible:false
    };
  },

  mounted() {
    this.gettablelist()
  },

  methods: {
    async gettablelist(){
      const pageNo=this.pageNo?this.pageNo-1:this.pageNo
      const {data:{list,totalCount}}=await getServiceListapi({...this.formdata,pageNo,pageSize:this.pageSize,})
      this.tableData=list
      this.total=totalCount
    },
    async tolook(row){
      this.dialogVisible=true
      this.formdia={...row}
      const {data:{entity:{accessSecret}}}=await getOpenapiapi({ accessKey: row.accessKey })
      this.$set(this.formdia,'accessSecret',accessSecret)
    },
        // 停用
    disab(row) {
      this.$confirm(`是否停用所选服务AccessKey?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          postDisableapi(row.accessKey).then((res) => {
            this.$message({
              type: res.code == '200' ? 'success' : 'warning',
              message: res.code == '200' ? '停用成功' : res.message
            })
            if (res.code == '200') this.gettablelist()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    chongzhi(){
      this.formdata={ifEnable:''}
      this.gettablelist()
    }
  },
};
</script>
<style scoped lang="scss">
.opapi-key{
  padding: 10px;
  background-color: #f1f1f1;
  height: 100%;
  .bodybox{
    height: 100%;
    background-color: #fff;
    padding: 20px;
    .table{
      height: calc(100% - 104px);
      .primary{
        margin-right: 10px;
      }
    }
    .fenye{
      margin-top: 10px;
      text-align: right;
    }
  }
}
</style>